{% extends 'base.html' %}
{% block big_pic %}
    {#__轮播图__!#}

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                {% load static %}
                <img src="{% static pic1.path %}" alt="...">
                <div class="carousel-caption">
                    A图片
                </div>
            </div>
            <div class="item">
                <img src="{% static pic2.path %}" alt="...">
                <div class="carousel-caption">
                    B图片
                </div>
            </div>

        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>


    {#__轮播图__!#}
{% endblock %}

{% block page-main %}

    <div class="col-xs-3">

        <!-- 热门知识 -->

        <div class="wcp-su-out-box">
            <div class="unit">
                <div class="title">
                    <i class="glyphicon glyphicon-fire"></i> &nbsp;热门知识
                    <a class="more-link" style="color: #D9534F;" target="_blank" href="**知识页面">
                        更多&gt;
                    </a>
                </div>
            </div>

            {% for article in od_articles %}
                <div class="unit unit-min link">
                    {#循环article，通过阅读量排序#}
                    <div class="wcp-su-one-line">
                        <span class="glyphicon glyphicon-folder-close"></span>
                        <a title="{{ article.title }}" target="_blank"
                           href="{% url 'article' article.pk %}">{{ article.title }}</a>
                    </div>
                </div>
            {% endfor %}


        </div>


    </div>
    <div class="col-xs-9" style="padding-left: 5px;">
        <!-- 知识分类 -->
        <style>
            .wcp-home-type-list li {
                float: left;
                padding: 4px;
                padding-left: 12px;
                padding-right: 12px;
                border-radius: 4px;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            .wcp-home-type-list {
                margin: 0px;
                padding: 0px;
            }

            .wcp-home-type-list .level1 {
                font-weight: 700;
                font-size: 16px;
            }

            .wcp-home-type-list a {
                color: #4d5356;
            }

            .wcp-home-type-list a:HOVER {
                color: #ba2636;
            }

            .wcp-home-type-list li:HOVER {
                background-color: #f2f2f2;
            }
        </style>
        <div class="wcp-su-out-box">
            <div class="unit">
                <div class="title">
                    <i class="glyphicon glyphicon-list-alt"></i> 知识分类
                </div>
            </div>

            {% for bigcategory in all_bigcategory %}
                {% if bigcategory.title != '未分类' %}
                    <div class="unit unit-min link wcp-type-homebox"
                         style="padding-top: 0px; padding-bottom: 0px; max-height: 55px; overflow: hidden;">
                        <ul class="wcp-home-type-list">
                            <li title="知识1/问答0" class="level1">
                                <a href="{% url 'article_list' bc_num=bigcategory.id %}">
                                    {{ bigcategory.title }}
                                </a>
                            </li>
                            {% for categories in bigcategory.categories.all %}
                                <li>
                                    <a class="level2"
                                       href="{% url 'article_list' bc_num=categories.bigcategory_id sc_num=categories.subcategory_id %}">{{ categories.subcategory.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                        <hr style="clear: both; border: 0px;">
                    </div>
                {% endif %}

            {% endfor %}
        </div>
    </div>
    <div class="wcp-su-out-box">
        <div class="unit">
            <div class="title">
                <i class="glyphicon glyphicon-comment"></i> 最新评论
            </div>
        </div>

        <div class="stream-item unit unit-min link" id="loop-30">
            {#--循环评论——#}
            {% for comment in od_comments %}
                <div class="media">
                    <div class="media-body">
                        <div style="margin-left: 4px;" class="pull-left">
                            <div>
                                <p class="doc_node_content">来自{{ comment.commentator.name }}的评论:
                                    {{ comment.content }}

                                    &nbsp;&nbsp; <a class="tip"
                                                    href="">《{{ comment.article.title }}》</a>&nbsp;&nbsp;
                                    <span style="color: navy; font-size: 12px;">
										{{ comment.create_time|date:"Y-m-d H:i:s" }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}

            {#--循环评论——#}
        </div>


    </div>


{% endblock %}
